<template>
  <div class="app-container">
    <el-form ref="pageInfo" :inline="true" class="demo-form-inline" :model="pageInfo" align="left">
      <el-form-item label="解约合同编号">
        <el-input v-model="pageInfo.sfTerminationNo" placeholder="小区姓名" />
      </el-form-item>
      <el-form-item label="录入人">
        <el-input v-model="pageInfo.inputUserName" placeholder="录入人" />
      </el-form-item>
      <el-form-item label="小区名称">
        <el-input v-model="pageInfo.premiseName" placeholder="小区名称" />
      </el-form-item>
      <el-form-item label="起租日期">
        <el-col :span="11">
          <el-date-picker v-model="pageInfo.inputDateStart" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker v-model="pageInfo.inputDateEnd" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <div align="right">
        <el-form-item>
          <el-button type="warning" @click="onSubmit">查询</el-button>
          <el-button type="warning" @click="resetForm('pageInfo')">清空</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column
        prop="sfTerminationNo"
        label="解约合同编号"
      />
      <el-table-column
        prop="premiseName"
        label="小区"
      />
      <el-table-column
        prop="terminationType"
        label="解约类型"
      >
        <template scope="scope">
          <span v-if="scope.row.terminationType==1">
            <el-button type="text" style="color: red">合同到期</el-button>
          </span>
          <span v-if="scope.row.terminationType==2">
            <el-button type="text" style="color: red">业主提前解约</el-button>
          </span>
          <span v-if="scope.row.terminationType==3">
            <el-button type="text" style="color: red">我方退租解约</el-button>
          </span>
          <span v-if="scope.row.terminationType==4">
            <el-button type="text" style="color: blue">其他</el-button>
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="terminationDate"
        label="解约日期"
        :formatter="changeDate"
      />
      <el-table-column
        prop="auditDate"
        label="审核日期"
        :formatter="changeDate"
      />
      <el-table-column
        prop="finalStatement"
        label="结算金额"
      />
      <el-table-column
        prop="inputDate"
        label="录入日期"
        :formatter="changeDate"
      />
      <el-table-column
        prop="userName"
        label="操作人"
      />
    </el-table>
    <el-pagination
      :current-page="pageInfo.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        inputUserName: '',
        sfTerminationNo: '',
        premiseName: '',
        inputDateStart: '',
        inputDateEnd: ''
      }
    }
  },
  created() {
    this.ownersList()
  },
  methods: {
    changeDate(row, column) {
      const date = row[column.property]
      if (date == null) {
        return ''
      }
      return this.moment(date).format('YYYY/MM/DD')
    },
    resetForm(formName) {
      this.pageInfo = {}
    },
    onSubmit() {
      this.ownersList()
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val
      this.ownersList()
    },
    handleCurrentChange(val) {
      this.pageInfo.pageNum = val
      this.ownersList()
    },
    ownersList() {
      this.axios.get('http://localhost:8092/tSfContract/searchContractJyList', { params: this.pageInfo }).then(res => {
        console.log(res.data)
        this.tableData = res.data.obj.list
        this.total = res.data.obj.total
        this.pageInfo.pageNum = res.data.obj.pageNum
        this.pageInfo.pageSize = res.data.obj.pageSize
      })
    }
  }
}
</script>

